<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 Entity.
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  // 角度
  const position = Cesium.Cartesian3.fromDegrees(
    -123.0744619,
    44.0503706,
    5000.0
  );
  const heading = Cesium.Math.toRadians(135);
  const pitch = 0;
  const roll = 0;
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );
  // Store the wheel's rotation over time in a SampledProperty.
  const wheelAngleProperty = new Cesium.SampledProperty(Number);
  const rotationProperty = new Cesium.CallbackProperty(function (time, result) {
    return Cesium.Quaternion.fromAxisAngle(
      Cesium.Cartesian3.UNIT_X,
      wheelAngleProperty.getValue(time),
      result
    );
  }, false);

  const wheelTransformation = new Cesium.NodeTransformationProperty({
    rotation: rotationProperty,
  });

  const nodeTransformations = {
    Wheels: wheelTransformation,
    Wheels_mid: wheelTransformation,
    Wheels_rear: wheelTransformation,
  };

  const entity = viewer.entities.add({
    name: "model",
    position: position,
    orientation: orientation,
    model: {
      show: true,
      uri: "/cesiumData/models/CesiumAir/Cesium_Air.glb",
      scale: 1.0,
      minimumPixelSize: 128, // 模型的最小最小像素大小，而不考虑缩放
      maximumScale: 20000, // 模型的最大比例尺大小。 minimumPixelSize的上限
      incrementallyLoadTextures: true, // 确定在加载模型后纹理是否可以继续流入
      runAnimations: true, // 是否应启动模型中指定的glTF动画
      clampAnimations: true, // glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
      shadows: Cesium.ShadowMode.DISABLED,
      heightReference: Cesium.HeightReference.NONE,
      silhouetteColor: Cesium.Color.RED, // 轮廓的颜色
      silhouetteSize: 0.0, // 轮廓的宽度
      color: Cesium.Color.WHITE, // 模型的颜色

      // 目标颜色和图元的源颜色之间混合的不同模式
      // HIGHLIGHT 将源颜色乘以目标颜色;REPLACE 将源颜色替换为目标颜色;MIX 将源颜色和目标颜色混合在一起
      colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,
      // 用于指定 colorBlendMode 为 MIX 时的颜色强度。值0.0会产生模型的着色，而值1.0会导致纯色，介于两者之间的任何值都会导致两者混合
      colorBlendAmount: 0.5,
      imageBasedLightingFactor: new Cesium.Cartesian2(1.0, 1.0), // 指定基于漫反射和镜面反射的图像照明的贡献
      lightColor: undefined, // 为模型着色时指定浅色的属性。如果 undefined ，则使用场景的浅色。
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        1.0,
        2.0e3
      ),
      nodeTransformations: "",
      // articulations: {
      //   "Fairing Open": {
      //     epoch: "2019-06-01T16:00:00Z",
      //     number: [0, 0, 600, 120],
      //   },
      //   "Fairing Separate": {
      //     epoch: "2019-06-01T16:00:00Z",
      //     number: [0, 0, 400, -50],
      //   },
      //   "Fairing Drop": {
      //     epoch: "2019-06-01T16:00:00Z",
      //     interpolationAlgorithm: "LAGRANGE",
      //     interpolationDegree: 2,
      //     number: [0, 0, 80, 0, 100, 0, 120, -1, 600, -120],
      //   },
      // },
      // 裁剪面
      clippingPlanes: new Cesium.ClippingPlaneCollection({
        planes: [
          new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), 0.0),
        ],
        edgeWidth: 1.0,
      }),
    },
  });
  viewer.trackedEntity = entity;
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
